<!--
HTML5. Use tags like <article>, <section>, etc.
See: http://www.sitepoint.com/web-foundations/doctypes/
-->
<!doctype html>

<html lang="en">
  <head>
    <meta charset="utf-8">

    <!--
    Ask IE to behave like a modern browser
    See: https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible
    -->
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>My Site</title>

    <!--
    Disables zooming on mobile devices.
    -->
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <!--
    Stylesheet that minimizes browser differences.
    See: http://necolas.github.io/normalize.css/
    -->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/responsive-nav.css">
    <link href='http://fonts.useso.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
    <!--
    Our own stylesheet.
    -->
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <div class="container">
        <div class="centered-container">
          <!-- All inline elements are centered in this container. -->
          <header class="main-header">
            <img src="img/teng.jpg" class="main-header-avatar"/>
            <h1>Hi, I'm Teng Bao</h1>
          </header>
          <nav class="main-nav" id="nav">
            <ul class="nostyle inline-items">
              <li><a href="#">Work</a></li>
              <li><a href="#">Experience</a></li>
              <li><a href="#">Photos</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </nav>
        </div>
          <section class="info-section whatido">
            <div class="toggle-div">
              <a href="#nav" id="toggle">Menu</a>
            </div>
            <header>
              <h2 class="info-section__title">What I Do</h2>
              <p class="info-section__description">I'm Teng. I design and develop things on the web. Oh, and I like curry.</p>
            </header>
            <ul class="whatido__skill-list float-layout clearfix">
              <li class="whatido__skill--code">
                <h3>Code</h3>
                <p>I like building things on the web. I've built games, tools, and web apps.</p>
              </li>
              <li class="whatido__skill--design">
                <h3>Design / UX</h3>
                <p>I like creating happiness by making things look good and work well.</p>
              </li>
              <li class="whatido__skill--product">
                <h3>Product</h3>
                <p>I like taking products from idea to reality to users and beyond!</p>
              </li>
            </ul>
          </section>
          <section class="info-education education">
            <header>
              <h2 class="info-education__title">Education <span>&amp;</span> Experience</h2>
            </header>
            <div class="education__list clearfix">
              <img src="img/strikingly-logo.png" class="education__img float-left" alt="">
              <article class="education__content">
                <h3 class="leve2_title">Strikingly</h3>
                <h4 class="leve3_title">Cofounder, 2012 - Present</h4>
                <p>Strikingly is a website builder that's simple, beautiful, and fun. And perfect for the age of mobile. I'm in charge of UI/UX and front-end.</p>
                <p>Y Combinator Winter '13</p>
              </article>
            </div>
            <div class="education__list clearfix">
              <img src="img/echo-rocket.jpg" class="education__img float-left" alt="">
              <article class="education__content">
                <h3 class="leve2_title">Freelance Web/Game Developer</h3>
                <h4 class="leve3_title">2007 - 2012</h4>
                <p>EchoRocket was my one-man Flash game studio and web development/design consultancy. I built Spinblaster, Block Knocker, CampusAmp, HireBrite, and more!</p>
              </article>
            </div>
            <div class="education__list clearfix">
              <img src="img/u-of-chicago.jpg" class="education__img float-left" alt="">
              <article class="education__content">
                <h3 class="leve2_title">University of Chicago</h3>
                <h4 class="leve3_title">BA Economics, 2008-2012</h4>
                <p>Studying the finer points of firms, markets, finance, decision theory, and supply and demand.</p>
                <p>Activities: Chicago Careers in Business, Student Government, Phi Beta Kappa</p>
              </article>
            </div>
          </section>
          <div class="photo__area">
            <header>
              <h2 class="info-photo__title">Photos</h2>
              <p class="photo__desc">Some pics from my travels!</p>
            </header>
            <ul class="photo_list">
              <li><img src="img/p01.jpg" class="photo_list_img" alt=""></li>
              <li><img src="img/p02.jpg" class="photo_list_img" alt=""></li>
              <li><img src="img/p03.jpg" class="photo_list_img" alt=""></li>
              <li><img src="img/p04.jpg" class="photo_list_img" alt=""></li>
              <li><img src="img/p05.jpg" class="photo_list_img" alt=""></li>
              <li><img src="img/p06.jpg" class="photo_list_img" alt=""></li>
              <li><img src="img/p07.jpg" class="photo_list_img" alt=""></li>
              <li><img src="img/p08.jpg" class="photo_list_img" alt=""></li>
            </ul>
          </div>
          <section class="touch_list">
            <header>
              <h2 class="touch_list_title">Get In Touch</h2>
            </header>
            <ul>
              <li class="touch_img1"><p>Facebook</p></li>
              <li class="touch_img2"><p>Twitter</p></li>
              <li class="touch_img3"><p>Twitter</p></li>
              <li class="touch_img4"><p>Twitter</p></li>
            </ul>
          </section>
          <div class="live_message">
            <header>
              <h2 class="live_title">OR... LEAVE A MESSAGE</h2>
            </header>
            <form action="" class="message_form">
              <div class="box">
                <div class="label-left">
                  Name
                </div>
                <input type="text" name="name">
              </div>
              <div class="box">
                <div class="label-left">
                  Email
                </div>
                <input type="text" name="name">
              </div>
              <div class="box">
                <div class="label-left">
                  Message
                </div>
                <textarea name="" id=""></textarea>
              </div>
              <button type="submit">Submit</button>
            </form>
          </div>
    </div>
    <script src="js/responsive-nav.js"></script>
    <script type="text/javascript">
      var navigation = responsiveNav("#nav", { // Selector: The ID of the wrapper
        animate: true, // Boolean: 是否启动CSS过渡效果（transitions）， true 或 false
        transition: 400, // Integer: 过渡效果的执行速度，以毫秒（millisecond）为单位
        label: "", // String: Label for the navigation toggle
        insert: "after", // String: Insert the toggle before or after the navigation
        customToggle: "#toggle", // Selector: Specify the ID of a custom toggle
        openPos: "relative", // String: Position of the opened nav, relative or static
        jsClass: "js", // String: 'JS enabled' class which is added to <html> el
        debug: false, // Boolean: Log debug messages to console, true 或 false
        init: function(){}, // Function: Init callback
        open: function(){}, // Function: Open callback
        close: function(){} // Function: Close callback
      });
    </script>
  </body>
</html>